<template>
  <div class="home">
    <el-carousel trigger="click" type="card">
      <el-carousel-item v-for="(item, index) in imgurl" :key="index">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="list1">
      <el-row gutter="40">
        <el-col :md="6" :sm="12" :xs="24">
          <div>
            <img src="../assets/ch1.png" alt=""  />
            <p><el-link :underline="false">实战项目</el-link></p>
          </div>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <div>
            <img src="../assets/ch2.png" alt="" />
            <p><el-link :underline="false">在线接口</el-link></p>
          </div>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <div>
            <img src="../assets/ch3.png" alt="" />
            <p><el-link :underline="false">学习资料</el-link></p>
          </div>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <div>
            <img src="../assets/ch4.png" alt="" />
            <p><el-link :underline="false">技术顾问</el-link></p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="list2">
      <el-row gutter="30">
        <el-col :sm="8" :xs="24">
          <div>
            <p><img src="../assets/tb1.png" alt="" /></p>
            <p><span>专项练习</span></p>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div>
            <p><img src="../assets/tb2.png" alt="" /></p>
            <p><span>模拟练习</span><span>名师预测</span></p>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div>
            <p><img src="../assets/tb3.png" alt="" /></p>
            <p>
              <span>往年真题</span>
            </p>
          </div>
        </el-col>
      </el-row>
      <el-row gutter="30">
        <el-col :sm="8" :xs="24">
          <div>
            <p><img src="../assets/tb4.png" alt="" /></p>
            <p>
              <span>相关资料</span>
            </p>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div>
            <p><img src="../assets/tb5.png" alt="" /></p>
            <p>
              <span>文库</span><span>tecool</span
              ><span>课堂笔记</span>
            </p>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div>
            <p><img src="../assets/tb6.png" alt="" /></p>
            <p>
              <span>错题本</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      imgurl: [
        require("../assets/ban3.jpg"),
        require("../assets/ban2.jpg"),
        require("../assets/ban1.jpg"),
      ],
    };
  },
};

</script>

<style>
.home .el-carousel img {
  width: 100%;
  height: 90%;
}
.list1 {
  width: 80%;
  margin: 20px auto;
}

.list1 .el-row .el-col img {
  width: 60%;
  height: 80%;
}
.list1 .el-row .el-col div {
  text-align: center;
  border: 1px solid #ccc;
  padding: 20px;
  height: 80%;
}
.list2 p{ 
  color:grey;
  font-weight: 800;
  font-size:18px;

}
.list2 {
  width: 90%;
  margin: 20px auto;
}
.list2 .el-row{
  margin-top: 30px;
}
.list2 .el-row .el-col img {
  width: 100px;
  height: 100px;
}
.list2 .el-row .el-col div {
  border: 1px solid #ccc;
  padding: 20px;
}
.list2 .el-row .el-col div p {
  text-align: center;
  padding: 15px 0;
}
.list2 .el-row .el-col div p:nth-child(1) {
  border-bottom: 1px solid #ccc;
}
.list2 .el-row .el-col div p span {
  margin: 0 10px;
}
</style>
